<template>
  <img :data-src="url" alt="" >
</template>
<script>
export default {
    props:{
        url:{
            type:String,
            default:'./../images/defaultImg.png'
        }
    },
    mounted() {
        var newImg = new Image()
        newImg.src = this.url
        newImg.onerror = () => {    // 图片加载错误时的替换图片
            newImg.src = './../images/err-img.png'
        }
        newImg.onload = () => { // 图片加载成功后把地址给原来的img
            this.url = newImg.src
        }
        setTimeout(() => {this.lazyImage()},2000)
    },
    methods : {
        lazyImage () {
            let src = this.$el.getAttribute('data-src') ;
            this.$el.setAttribute('src',src)
        }
    }
}
</script>

